import React, { Component } from 'react';
import style from './index.less';
import { Menu } from 'antd';
import { MailOutlined } from '@ant-design/icons';
import MailTemplate from './components/MailTemplate';

export default class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      current: '1'
    };
  }

  handleClick = e => {
    console.log('click ', e);
    this.setState({ current: e.key });
  };
  render() {
    const { current } = this.state;
    return (
      <div className={style.sendmail}>
        <Menu onClick={this.handleClick} selectedKeys={[current]} mode="horizontal">
          <Menu.Item key="1" icon={<MailOutlined />}>
            scheduled
          </Menu.Item>
          <Menu.Item key="2" icon={<MailOutlined />}>
            Refund complete
          </Menu.Item>
          <Menu.Item key="3" icon={<MailOutlined />}>
            Congratulations
          </Menu.Item>
          <Menu.Item key="4" icon={<MailOutlined />}>
            approved
          </Menu.Item>
          <Menu.Item key="5" icon={<MailOutlined />}>
            rejected
          </Menu.Item>
          <Menu.Item key="6" icon={<MailOutlined />}>
            received
          </Menu.Item>
          <Menu.Item key="7" icon={<MailOutlined />}>
            Successfully picked-up
          </Menu.Item>
        </Menu>
        {current == '1' ? (
          <MailTemplate>
            <div slot="title">Your appointment has been scheduled.</div>
            <p slot="content">
              {' '}
              Thank you for making an appointment. We will notify you via email when the exact pick-up time has been
              confirmed.
            </p>
            <p slot="contactinfo">
              {' '}
              Please note you will no longer be able to cancel your return. For more details please refer to our{' '}
              <a>return policy</a>
            </p>
            <div slot="footer"></div>
          </MailTemplate>
        ) : (
          ''
        )}
        {current == '2' ? (
          <MailTemplate>
            <div style={{ color: 'green' }} slot="title">
              Refund complete!
            </div>
            <p slot="content">
              {' '}
              We are happyy to inform you that the refund is completed. The refund has been transferred to Paypal
              393**********3453
            </p>
            <div slot="contactinfo" style={{ height: '400px' }}>
              <p
                style={{
                  width: 'auto',
                  height: '35px',
                  fontSize: '26px',
                  fontFamily: 'Helvetica',
                  fontWeight: '400',
                  lineHeight: '31px',
                  color: ' #000000',
                  opacity: 1
                }}
              >
                Order number:hdhs2617261728273
              </p>
              <div className={style.order}>
                <div className={style.left}>
                  <img src={require('./asset/sofe.jpg')}></img>
                  <span>Simmons mattress LIH283HG76 X1</span>
                </div>
                <div className={style.right}>
                  <div>
                    <span className={style.zuo}>Order payment</span>
                    <span className={style.you}>$350.00</span>
                  </div>
                  <div>
                    <span className={style.zuo}>Standard Delivery charge</span>
                    <span className={style.you}>-$50.00</span>
                  </div>
                  <div>
                    <span className={style.zuo}>Return cost </span>
                    <span className={style.you}>-$50.00</span>
                  </div>
                  <div>
                    <span className={style.zuo}>Indoor pick-up</span>
                    <span className={style.you}>-$100.00</span>
                  </div>
                  <div>
                    <span className={style.zuo}>packing</span>
                    <span className={style.you}>-$100.00</span>
                  </div>
                  <div>
                    <span className={style.zuo} style={{ fontWeight: 400 }}>
                      Refund
                    </span>
                    <span className={style.you} style={{ fontWeight: 400 }}>
                      $50.00
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div slot="footer"></div>
          </MailTemplate>
        ) : (
          ''
        )}
        {current == '3' ? (
          <MailTemplate>
            <div slot="title">
              <span style={{ color: 'green' }}>Congratulations!</span>
              <br />
              <span>Your request has been approved!</span>
            </div>
            <div style={{ marginTop: '20px' }}>
              {' '}
              <p slot="content">
                {' '}
                We are happy to notify you that your request for the return of the Stoke sofa has been approved! Please
                make an appointment for pick up within XX hours. Your request order number is: 123 1234 123
              </p>
              <div style={{ textAlign: 'center', marginTop: '20px' }}>
                Make an appointment within <span style={{ color: '#E99D42' }}>70H : 23M : 12S</span>
              </div>
            </div>
            <div slot="contactinfo" className={style.requestContactinfo}>
              <span className={style.requestConbtn}>Make appointment</span>
              <span className={style.requestConbox}>
                <img src={require('./asset/tan.jpg')} />
                <ul>
                  <li>
                    {' '}
                    If you fail to make an appointment within XX hours after the return approval your return request
                    will be cancelled.{' '}
                  </li>
                  <li> Please note after making an appointment, you can no longer cancel your return request.</li>
                </ul>
              </span>
            </div>
            <div slot="footer"></div>
          </MailTemplate>
        ) : (
          ''
        )}
        {current == '4' ? (
          <MailTemplate>
            <div slot="title">
              <span style={{ color: 'green' }}>Congratulations!</span>
              <br />
              <span>Your request has been approved!</span>
            </div>
            <p slot="content">Our logistics company will contact you soon to arrange for pick-up.</p>
            <div slot="contactinfo" className={style.mail4}>
              <div className={style.mail4box}>
                <img src={require('./asset/tan.jpg')} />
                <span>Please note after arranging for pick-up, you can no longer cancel your return request.</span>
              </div>
              <p
                style={{
                  width: 'auto',
                  height: '35px',
                  fontSize: '26px',
                  fontFamily: 'Helvetica',
                  fontWeight: '400',
                  lineHeight: '31px',
                  color: ' #000000',
                  opacity: 1
                }}
              >
                Order number:hdhs2617261728273
              </p>
              <div className={style.order}>
                <div className={style.left}>
                  <img src={require('./asset/sofe.jpg')}></img>
                  <span>Simmons mattress LIH283HG76 X1</span>
                </div>
                <div className={style.right}>
                  <div>
                    <span className={style.zuo}>Order payment</span>
                    <span className={style.you}>$350.00</span>
                  </div>
                  <div>
                    <span className={style.zuo}>Standard Delivery charge</span>
                    <span className={style.you}>-$50.00</span>
                  </div>
                  <div>
                    <span className={style.zuo}>Return cost </span>
                    <span className={style.you}>-$50.00</span>
                  </div>
                  <div>
                    <span className={style.zuo}>Indoor pick-up</span>
                    <span className={style.you}>-$100.00</span>
                  </div>
                  <div>
                    <span className={style.zuo}>packing</span>
                    <span className={style.you}>-$100.00</span>
                  </div>
                  <div>
                    <span className={style.zuo} style={{ fontWeight: 400 }}>
                      Refund
                    </span>
                    <span className={style.you} style={{ fontWeight: 400 }}>
                      $50.00
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div slot="footer"></div>
          </MailTemplate>
        ) : (
          ''
        )}
        {current == '5' ? (
          <MailTemplate>
            <div slot="title">Your appointment has been scheduled.</div>
            <p slot="content">We are sorry to inform you that your return has been rejected.</p>
            <div slot="contactinfo">
              Your request has been rejected for the following reasons
              <div>
                <img style={{ width: '22px', height: '22px' }} src={require('./asset/error.jpg')}></img>
                <span
                  style={{
                    fontWeight: '400',
                    color: '#848484',
                    fontSize: '30px'
                  }}
                >
                  Outside of return timeframe
                </span>
              </div>
              <div>
                <img style={{ width: '22px', height: '22px' }} src={require('./asset/error.jpg')}></img>
                <span
                  style={{
                    fontWeight: '400',
                    color: '#848484',
                    fontSize: '30px'
                  }}
                >
                  Outside of covered area
                </span>
              </div>
              <div>
                <img style={{ width: '22px', height: '22px' }} src={require('./asset/error.jpg')}></img>
                <span
                  style={{
                    fontWeight: '400',
                    color: '#848484',
                    fontSize: '30px'
                  }}
                >
                  Discounted item
                </span>
              </div>
              <div>
                <img style={{ width: '22px', height: '22px' }} src={require('./asset/error.jpg')}></img>
                <span
                  style={{
                    fontWeight: '400',
                    color: '#848484',
                    fontSize: '30px'
                  }}
                >
                  Poor condition
                </span>
              </div>
              <p>
                For more details please refer to our <a>return policy.</a>
              </p>
            </div>

            <div slot="footer"></div>
          </MailTemplate>
        ) : (
          ''
        )}
        {current == '6' ? (
          <MailTemplate>
            <div slot="title">Your appointment has been scheduled.</div>
            <p slot="content">
              {' '}
              We have received your return request for verification. We will notify you about the approval within 24
              hours.{' '}
            </p>
            <p slot="contactinfo">
              {' '}
              For more details please refer to our <a>return policy</a>
            </p>
            <div slot="footer"></div>
          </MailTemplate>
        ) : (
          ''
        )}
        {current == '7' ? (
          <MailTemplate>
            <div style={{ color: 'green' }} slot="title">
              Successfully picked-up!
            </div>
            <p slot="content">
              Your item has been successfully picked up we will arrange for your refund within 36 hours.
            </p>
            <div slot="contactinfo" style={{ height: '400px' }}>
              <p
                style={{
                  width: 'auto',
                  height: '35px',
                  fontSize: '26px',
                  fontFamily: 'Helvetica',
                  fontWeight: '400',
                  lineHeight: '31px',
                  color: ' #000000',
                  opacity: 1
                }}
              >
                Order number:hdhs2617261728273
              </p>
              <div className={style.order}>
                <div className={style.left}>
                  <img src={require('./asset/sofe.jpg')}></img>
                  <span>Simmons mattress LIH283HG76 X1</span>
                </div>
                <div className={style.right}>
                  <div>
                    <span className={style.zuo}>Order payment</span>
                    <span className={style.you}>$350.00</span>
                  </div>
                  <div>
                    <span className={style.zuo}>Standard Delivery charge</span>
                    <span className={style.you}>-$50.00</span>
                  </div>
                  <div>
                    <span className={style.zuo}>Return cost </span>
                    <span className={style.you}>-$50.00</span>
                  </div>
                  <div>
                    <span className={style.zuo}>Indoor pick-up</span>
                    <span className={style.you}>-$100.00</span>
                  </div>
                  <div>
                    <span className={style.zuo}>packing</span>
                    <span className={style.you}>-$100.00</span>
                  </div>
                  <div>
                    <span className={style.zuo} style={{ fontWeight: 400 }}>
                      Refund
                    </span>
                    <span className={style.you} style={{ fontWeight: 400 }}>
                      $50.00
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div slot="footer"></div>
          </MailTemplate>
        ) : (
          ''
        )}
      </div>
    );
  }
}
